<template>
  <div class="x-meun">
    <div class="slot">
      <slot></slot>
    </div>

    <div v-show="active">
      <div class="mask" ref="mask" :style="{ opacity: active ? 1 : 0 }"></div>
      <div class="slider" ref="slider" :style="{ opacity: active ? 1 : 0 }"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'x-meun',
    props: {
      // 父子组件传递的当前激活菜单项的label标识
      value: {
        default: '123',
      },
    },
    data() {
      return {
        random: Math.floor(Math.random() * 100),
        labelList: [],
      }
    },
    computed: {
      // 当前激活菜单项的label标识 将父组件传递过来的value值备份
      activeLabel() {
        return this.value
      },
      activeIndex() {
        return this.labelList.indexOf(this.activeLabel)
      },
      active() {
        return this.labelList.includes(this.activeLabel)
      },
    },
    watch: {
      // 监听激活菜单项的变化，并将其同步到子组件
      activeLabel(val) {
        this.$xbus.$emit('x-menu/change', val)
        if (this.active) this.moveSlider(this.activeIndex)
      },
    },
    methods: {
      // 处理子组件点击菜单项的事件
      handleActive(label) {
        if (this.$listeners['input']) {
          this.$emit('input', label)
        }
      },
      // 移动菜单项的滑块
      moveSlider(activeIndex) {
        this.$refs.slider.style.transform = `translateY(${activeIndex * 48}px)`
        this.$refs.mask.style.transform = `translateY(${activeIndex * 48}px)`
      },
      updateLabelList(label) {
        this.labelList.push(label)
      },
    },
    created() {
      // 监听菜单项激活事件
      this.$xbus.$on('x-menu-item/active', this.handleActive)
      // 监听菜单项加载事件
      this.$xbus.$on('x-menu-item/mounted', this.updateLabelList)
    },
    mounted() {
      // 触发菜单项改变事件
      this.$xbus.$emit('x-menu/change', this.activeLabel)
      // 首次渲染时，根据激活菜单项的标识，计算菜单项的位置
      const activeIndex = this.labelList.indexOf(this.activeLabel)
      this.moveSlider(activeIndex)
      // // 移除菜单项加载事件
      // this.$xbus.$off('x-menu-item/mounted', this.updateLabelList)
      if (this.labelList.length > this.$slots.default.length) {
        this.labelList = this.labelList.slice(0, this.$slots.default.length)
      }
    },
    beforeDestroy() {
      // 移除菜单项激活事件
      this.$xbus.$off('x-menu-item/active', this.handleActive)
      // // 移除菜单项加载事件
      this.$xbus.$off('x-menu-item/mounted', this.updateLabelList)
    },
  }
</script>

<style lang="scss" scoped>
  .x-meun {
    position: relative;
    .slot {
      z-index: 2;
      position: relative;
    }
    .slider {
      z-index: 1;
      width: 200px;
      height: 44px;
      top: 0;
      left: 0;
      position: absolute;
      background-color: transparent;
      border-right: 2px solid rgba(63, 140, 255, 1);
      transition: all 0.3s ease;

      &.active {
        border-right: 2px solid rgba(63, 140, 255, 1);
      }
    }
    .mask {
      z-index: 1;
      position: absolute;
      top: 0px;
      left: 15px;
      width: 172px;
      height: 44px;
      border-radius: 10px;
      background-color: #ebf3ff;
      transition: all 0.3s ease;
    }
  }
</style>
